<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JSP Page</title>
		<link type="text/css" rel="stylesheet" href="/css/articlelist.css" />
		<link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css" />
        <link type="text/css" rel="stylesheet" href="/css/myinfo.css" />
		<script src="/js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src="/js/jquery-1.12.4.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src="/js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>
		<script>
			$(function() {

				$("#btn").click(function click() {

					var a = document.getElementById('obj').getAttribute('title');

					if(a == "1") {
						$("#obj").attr("style", "display: block;")
						$("#obj").attr("title", "2")
					} else {

						$("#obj").attr("style", "display: none;")
						$("#obj").attr("title", "1")
					}
				});
			});
		</script>
		<style type="text/css">
			#obj {
				width: 652.03px;
				box-shadow: 0 0 0 1px lightgray;
				display: none;
				border-radius: 5px;
				margin-left: -180px;
    			margin-top: 10px;
			}
			 body{
        background-color:#f6f6f6 ;
    }
    .bo{
        width: 1031px;

    }
    .bo1{
        width: 693px;
        height: 60px;
        background-color:white ;

    }
    .li>a{
        color: #4fb5ff;
    }
    .size{
        font-size: 19px;
        margin-top: 5px;
        margin-left: 30px;
    }
    .bor{
        background: white;
        width: 693px;
        /*height: 226px;*/
        margin-top: 20px;

    }
    /*.head{
        border: 1px solid black;
         width: 300px;
         height: 23px;
         margin-left: 20px;
        margin-top: 20px;
        font-size: 19px;
        font-weight: 600;
    }*/
    .mx{
        margin-left: -45px;
        margin-top: 4px;
        font-weight:700 ;
        font-size: 18px;
    }
    .ms{
        margin-left: -45px;
        margin-top: -1px;
    }
    .btnmx{
        background: #e5f2ff;
        color: #0084ff;
    }
    .btnmx:hover{
        color: #0084ff;
    }
    .span{
        margin-top: 5px;
        color: #8590a6;
        text-decoration: none;
    }
    .span a:hover{
        text-decoration: none;
    }
    .m{
        margin-left: 10px;
    }
   
    .bu{
        margin-top: -22px;
        margin-left: 5px;
        color: #8590a6;
        outline: none;
    }
    .bu button:hover{
        text-decoration: none;
    }
		</style>
	</head>

	<body>
	<header>
		
		<div id="partofhead">
			<div id="shouye">
				<a href="">首页<span></span></a>
			</div>
			<div id="faxian">
				<a href="zhihu.jsp">发现<span></span></a>
			</div>
			<div id="dnld">
				<a href="file.jsp">等你来答<span></span></a>
			</div>
			<div id="sousuo">
				<form action="" method="">
					<div id="searchByTitle">
						<input type="text" name="title" value="&nbsp;&nbsp;&nbsp;&nbsp;李方灏他长得帅吗" />
					</div>
					<div id="searchByTitleSubmit">
						<input type="submit" value="🔍" />
					</div>
				</form>
			</div>
			<div>
				<img style="width: 75px; height: 50px;" src="/img/d22ccf189aa12bade15efe719fe46b0.png" />
			</div>
			<div class="head-nav-con clearFloat tou">
				<li class="drop-down">
					<img src="/img/loginback.png" style="border-radius: 3px;display: inline-block;width: 30px;height: 30px;" />
					<ul class="drop-down-content" style="margin-left: -35px;">
						<li>
							<a href="#" style="margin-left: 20px;">
								<svg fill="currentColor" viewBox="0 0 24 24" width="16" height="16" style="margin-top: 5px; margin-left: -60px;">
									<path d="M15.417 12.923c-.376.653-.837 1.281-.763 1.863.292 2.273 5.562 1.77 6.78 3.048.566.595.566.664.566 4.164-6.611-.07-13.363 0-20 0 .027-3.5 0-3.478.62-4.164 1.303-1.44 6.581-.715 6.78-3.133.045-.545-.38-1.114-.763-1.778C6.511 9.233 5.697 2 12 2s5.422 7.443 3.417 10.923z" fill-rule="evenodd"></path>
								</svg>
								<p style="margin-top: -12px;">我的主页</p>
							</a>
						</li>
						<li>
							<a href="#">
								<svg fill="currentColor" viewBox="0 0 24 24" width="16" height="16" style="margin-top: 5px; margin-left: -40px;">
									<path d="M20.868 17.185a.896.896 0 0 1-.452.137c-.123 0-1.397-.26-1.617-.233-1.354.014-1.78 1.276-1.835 1.742-.055.453 0 .892.191 1.303a.8.8 0 0 1-.068.851C16.224 21.877 14.922 22 14.73 22a.548.548 0 0 1-.356-.151c-.11-.096-.685-1.138-1.069-1.468-1.304-.955-2.247-.329-2.63 0-.398.33-.672.7-.836 1.125a.632.632 0 0 1-.329.37c-1.354.426-2.918-.919-3.014-1.056a.564.564 0 0 1-.123-.356c-.014-.138.383-1.276.342-1.688-.342-1.9-1.836-1.687-2.096-1.673a3.192 3.192 0 0 0-.918.178.873.873 0 0 1-.59-.055c-.887-.462-1.136-2.332-1.109-2.51.055-.315.192-.521.438-.604.425-.164.809-.452 1.151-.85.931-1.262.343-2.25 0-2.634-.342-.356-.726-.645-1.15-.809-.138-.041-.234-.151-.33-.316-.38-1.434.613-2.552.867-2.77.255-.22.6-.055.723 0 .425.164.877.219 1.343.15C6.7 6.636 6.784 5.141 6.81 4.908c.014-.247-.11-1.29-.137-1.4a.488.488 0 0 1 .027-.315C7.317 2.178 9.071 2 9.222 2a.56.56 0 0 1 .439.178c.11.124.63 1.111 1 1.4.4.338 1.583.83 2.59.013.397-.274.959-1.29 1.082-1.413A.55.55 0 0 1 14.717 2c1.56 0 2.329 1.029 2.438 1.22a.458.458 0 0 1 .069.371c-.028.151-.329 1.152-.26 1.605.365 1.537 1.383 1.742 1.89 1.783.493.028 1.644-.356 1.809-.343a.63.63 0 0 1 .424.206c.535.31.85 1.715.905 2.14.027.233-.014.439-.11.562-.11.138-1.165.714-1.48 1.112-.855.982-.342 2.25-.068 2.606.26.37 1.22.905 1.288.96.15.137.26.302.315.494.146 1.413-.89 2.387-1.069 2.47zm-8.905-.535c.644 0 1.246-.123 1.822-.356a4.576 4.576 0 0 0 1.493-1.016 4.694 4.694 0 0 0 1-1.495c.247-.562.357-1.18.357-1.81 0-.659-.11-1.262-.356-1.825a4.79 4.79 0 0 0-1-1.481 4.542 4.542 0 0 0-1.494-1.002 4.796 4.796 0 0 0-3.631 0 4.627 4.627 0 0 0-1.48 1.002c-.424.425-.767.919-1 1.481a4.479 4.479 0 0 0-.37 1.825c0 .644.124 1.248.37 1.81a4.62 4.62 0 0 0 1 1.495c.425.426.918.768 1.48 1.016a4.677 4.677 0 0 0 1.809.356z" fill-rule="evenodd"></path>
								</svg>
								<p style="margin-top: -12px;">设置</p>
							</a>
						</li>
						<li>
							<a href="#">
							<span>
									<svg  fill="currentColor" viewBox="0 0 24 24" width="16" height="16" style="margin-top: 5px; margin-left: -40px;">
										<path d="M2 11.999c0-2.756 1.154-5.417 3.167-7.3a1.266 1.266 0 0 1 1.73 1.847 7.396 7.396 0 0 0-2.367 5.453c0 4.119 3.35 7.47 7.47 7.47 4.119 0 7.47-3.351 7.47-7.47a7.41 7.41 0 0 0-2.279-5.37 1.266 1.266 0 0 1 1.76-1.819A9.923 9.923 0 0 1 22 12c0 5.513-4.486 10-10 10s-10-4.487-10-10zm8.699-.482V3.26a1.26 1.26 0 1 1 2.52 0v8.257a1.26 1.26 0 1 1-2.52 0z" fill-rule="evenodd"></path>
									</svg>
									<p style="margin-top: -12px;">退出</p>
							</a>
						</li>
					</ul>
				</li>
			</div>
		</div>
		</div>
	</header>
		<div id="backgroundcolor">
			<div id="header">
				<div id="headerBackImg">
					<img src="/UserBackPhoto/${sessionScope.User.backphoto}">
				</div>
				<div id="headimg">
					<img src="/UserHeadPhoto/${sessionScope.User.headphoto}">
					<%--<img src="{$headimgurl}">--%>
				</div>
				
				<div id="headerName">
					<span id="userName" class="span1" style="margin-left: 216px;margin-top: -5px;">
						${sessionScope.User.nickname}</span>
						<div id="con">
                        <a href="/jsp/individual.jsp" id="info">编辑个人信息</a>
                    </div>
					<div data-spy = "scroll" data-offset = "60" data-target = "#selector" style="margin-left: 176px;margin-top: 7px;">
					<a href="#mycollapse" class="btn-default" id="btn_collect" style="text-decoration:none;white-space: nowrap;display:block;margin-left: -23px;border:none;outline: medium;background: #fff;width: 0px;height: 0px;" data-toggle = "collapse">
						<span class="glyphicon glyphicon-menu-down" id="btn_collect_icon" aria-hidden="true"></span>详细信息
					</a>
					<div class="collapse" id="mycollapse">
					<div style="width: 351px;height: 147px;margin-left: -8px;margin-top: 20px;position:absolute;background: white;border: none;outline: medium;">
					<span id="userAddress" class="span1">居住地</span>
					<span id="userHobby" class="span1">爱好</span>
					<span id="birthday" class="span1">生日</span>
					<span id="describe" class="span1">个人简介</span>
					<span id="userAddressTxt" class="span2">${sessionScope.User.address}</span>
					<span id="hobbyTxt" class="span2">${sessionScope.User.hobby}</span>
					<span id="birthTxt" class="span2">${sessionScope.User.birthday}</span>
					<span id="descTxt" class="span2">${sessionScope.User.describes}</span>
						</div>
						</div>
					</div>
				</div>
				
				<div id="middle">
					
  						<div class="container">
							<ul class="navbar navbar-default nav navbar-nav collapse navbar-collapse" style="width: 700px;background: white;">
								<li><a href="" id="dongtai">动态</a></li>
								<li><a href="" id="wenda">问答</a></li>
								<li><a href="" id="tiwen">提问</a></li>
								<li><a href="" id="wenzhang">文章</a></li>
								<li><a href="" id="zhuanlan">专栏</a></li>
								<li><a href="" id="xiangfa">想法</a></li>
								<li><a href="" id="gengduo">更多</a></li>
							</ul>
					 </div>
				</nav>
					<!--<a href="" id="dongtai">动态</a>
					<a href="" id="wenda">问答</a>
					<a href="" id="tiwen">提问</a>
					<a href="" id="wenzhang">文章</a>
					<a href="" id="zhuanlan">专栏</a>
					<a href="" id="xiangfa">想法</a>
					<a href="" id="gengduo">更多</a>-->
				</div>
				<div class="d">
					<div class="d1">
						<a href="#">
							<div class="span">
								关注了
							</div>
							<strong>0</strong>
						</a>
						
					</div>
					<div class="d2">
						<a href="#">
							<div class="span">
								关注者
							</div>
							<strong>0</strong>
						</a>
						
					</div>
					<div class="E">
						<hr />
						<a href="#">
							<p class="left">关注的话题</p>
							<p class="left01">0</p>
						</a>
						<hr />
						<a href="#">
							<p class="left">关注的专题</p>
							<p class="left01">0</p>
						</a>
						<hr />
						<a href="#">
							<p class="left">关注的问题</p>
							<p class="left01">0</p>
						</a>
						<hr />
						<a href="#">
							<p class="left">关注的收藏夹</p>
							<p class="left01">0</p>
						</a>
						<hr />
						<div>
							<a href="#">
								<div class="left02">
									个人主页被浏览43次
								</div>
							</a>
						</div>
						<hr style="margin-top: 20px;" />
					</div>
					<footer class="left02" style="font-size: 13px;">
						<a>
							刘看山&nbsp;·&nbsp;知乎指南&nbsp;·&nbsp;知乎协议知&nbsp;·&nbsp;乎隐私保护指引<br />
							应用&nbsp;·&nbsp;工作&nbsp;·&nbsp;申请开通知乎机构号<br />
							侵权举报&nbsp;·&nbsp;网上有害信息举报专区<br />
							京 ICP 证 110745 号<br />
							<img style="bottom: 10px;" src="/img/guohui.jpg" />
							京公网安备 11010802010035 号<br />
							违法和不良信息举报：010-82716601<br />
							儿童色情信息举报专区<br />
							证照中心<br />
							联系我们 © 2019 知乎
						</a>
					</footer>
				</div>

				<!--<div id="middleSpan">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</div>-->
				<div id="wodetongtai" class="row" style="margin-left: 0px;background: white;">
					<p>我的动态</p>
				</div>
			</div>
			<div id="article">
				<div id="article1">
					<div class="container">
						<div class="row">
							<p id="title">Is lifanghao a Dog?</p>			
						</div>
						<div class="row">
							<div id="articleheadImg" class="col-md-1">
								<img src="/img/ziluolan.jpg">
							</div>
							<div class="col-md-11">
							<p id="userName" style="font-size: 16px;">${sessionScope.User.nickname}
								
						<p id="userDesc" style="font-size: 14px; font-weight: 300;">${sessionScope.User.describes}</p>
							</div>
						</div>
						<div class="row">
							<div class="col-md-4">
						<img src="/img/bbb.png" id="articlePhoto">
						</div>
						<div class="col-md-8">
						<i id="articleContent">
							<a href="">新京报讯（记者 徐晓帆）中国U20男足新一期集训名单今日公布，申花小将周俊辰在被足协禁赛一年后首次回归国字号。 本期集训将在11月1日至15日在武汉进行。共有来自16家俱乐部的24名球员入选，主教练为塞尔维亚人扬科维奇。值得注意的是，此次入选的4名申花球员中，周俊辰赫然在列。 去年9月14日，中国足协曾因周俊辰“比赛态度消极、行为散漫、无视教练要求、且在赛后擅自外出组织聚餐”为由，对其处以取消进入各级国家队资格，禁止参与中国足协举办赛事一年的处罚。 如今解禁已经过去一个多月，周俊辰得以重返国字号。本赛季，他在申花的各项赛事中出场6次，其中联赛5次出场，场均时间只有8分钟。</a>
						</i>
						</div>
						</div>
						<div class="row">
							<div class="col-md-2" style="margin-top: 163px;margin-left: 190px;">
								<div data-spy = "scroll" data-offset = "60">
								<span class="glyphicon glyphicon-comment" id="beclickspan"><a href="" class="btn btn-link bu" style="margin-top: -10px;color: darkgrey;" id="btn" data-toggle = "collapse">308条评论</a></span>
								<div id="obj" title="1" class="container">
                                           <div class="row" style="margin-left: 10px">
                                           <div class="row" style="height: 50.99px; line-height:50.98px;">
                                               <h4 style="font-size: 15px;font-weight: bold; padding-left: 10px; padding-top: 8px;">25条评论</h4>
                                           </div>
                                           <div class="row">
                                               <div class="col-md-2">
                                                   <img src="img/bihubihu.png" width="24px" height="24px" />
                                                   <span style="font-weight: 500px;">李方灏</span>

                                               </div>
                                               <div class="col-md-1 col-md-offset-8">
                                                   <span style="display: block; width: 44.36px; height: 26.81px; font-size: 14px;">三天前</span>
                                               </div>
                                           </div>
                                           <div class="row">
                                               <div class="col-md-10 col-md-offset-1">
                                                   <p>这大招范围...</p>
                                               </div>
                                           </div></div>
                                           <div class="row">
                                               <div class="col-md-2 col-md-offset-1">
                                                   <%--<a href="" style="text-decoration: none;">--%>
                                                       <%--</a>--%>
                                                   <button type="button" class="btn btn-default" style="border: none;outline:medium;margin-top: -5px;background-color: none">
                                                       <span style="color: lightgrey; display: inline-flex; align-items: center;">​<svg class="Zi Zi--Like" fill="currentColor" viewBox="0 0 24 24" width="16" height="16" style="margin-right: 5px;"><path d="M14.445 9h5.387s2.997.154 1.95 3.669c-.168.51-2.346 6.911-2.346 6.911s-.763 1.416-2.86 1.416H8.989c-1.498 0-2.005-.896-1.989-2v-7.998c0-.987.336-2.032 1.114-2.639 4.45-3.773 3.436-4.597 4.45-5.83.985-1.13 3.2-.5 3.037 2.362C15.201 7.397 14.445 9 14.445 9zM3 9h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1z" fill-rule="evenodd"></path></svg></span>
                                                       <span style="color: lightgrey; ">7</span>
                                                       </button>
                                               </div>
                                               <div class="col-md-2">
                                                   <a href="" style="text-decoration: none;"><span style="color: lightgrey; display: inline-flex; align-items: center;">​<svg class="Zi Zi--Reply" fill="currentColor" viewBox="0 0 24 24" width="16" height="16" style="margin-right: 5px;"><path d="M22.959 17.22c-1.686-3.552-5.128-8.062-11.636-8.65-.539-.053-1.376-.436-1.376-1.561V4.678c0-.521-.635-.915-1.116-.521L1.469 10.67a1.506 1.506 0 0 0-.1 2.08s6.99 6.818 7.443 7.114c.453.295 1.136.124 1.135-.501V17a1.525 1.525 0 0 1 1.532-1.466c1.186-.139 7.597-.077 10.33 2.396 0 0 .396.257.536.257.892 0 .614-.967.614-.967z" fill-rule="evenodd"></path></svg></span>
                                                       <span style="color: lightgrey;">分享</span></a>

                                               </div>
                                               <div class="col-md-2">
                                                   <a href="" style="text-decoration: none;">
                                                       <span style="color: lightgrey; display: inline-flex; align-items: center;">​<svg class="Zi Zi--Like" fill="currentColor" viewBox="0 0 24 24" width="16" height="16" style="transform: rotate(180deg); margin-right: 5px;"><path d="M14.445 9h5.387s2.997.154 1.95 3.669c-.168.51-2.346 6.911-2.346 6.911s-.763 1.416-2.86 1.416H8.989c-1.498 0-2.005-.896-1.989-2v-7.998c0-.987.336-2.032 1.114-2.639 4.45-3.773 3.436-4.597 4.45-5.83.985-1.13 3.2-.5 3.037 2.362C15.201 7.397 14.445 9 14.445 9zM3 9h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1z" fill-rule="evenodd"></path></svg></span>
                                                       <span style="color: lightgrey;">踩</span></a>

                                               </div>
                                               <div class="col-md-2">
                                                   <a href="" style="text-decoration: none;">
                                                       <span style="color: lightgrey; display: inline-flex; align-items: center;">​<svg class="Zi Zi--Report" fill="currentColor" viewBox="0 0 24 24" width="16" height="16" style="margin-right: 5px;"><path d="M19.947 3.129c-.633.136-3.927.639-5.697.385-3.133-.45-4.776-2.54-9.949-.888-.997.413-1.277 1.038-1.277 2.019L3 20.808c0 .3.101.54.304.718a.97.97 0 0 0 .73.304c.275 0 .519-.102.73-.304.202-.179.304-.418.304-.718v-6.58c4.533-1.235 8.047.668 8.562.864 2.343.893 5.542.008 6.774-.657.397-.178.596-.474.596-.887V3.964c0-.599-.42-.972-1.053-.835z" fill-rule="evenodd"></path></svg></span>
                                                       <span style="color: lightgrey;">举报</span></a>

                                               </div>
                                           </div>
                                           <hr />
                                           <div >
                                               <form class="navbar-form  form-inline" action="" method="post" style="margin-left: 10px">
                                                   <div class="form-inline" style="margin-top: 10px">
                                                       <input type="text" class="form-control" placeholder="写下你的评论..." style="width: 450px;"/>
                                                       <input type="button" class="btn btn-primary" value="发布" />
                                                   </div>
                                               </form>
                                           </div>
                                       </div>
							</div></div>
							<div class="col-md-2" style="margin-top: 164px;margin-left: -88px;">
								<span class="glyphicon glyphicon-send" id="articlesharespan"><a class="btn btn-link" href="">分享</a></span>
							</div>
							<div class="col-md-2" style="margin-top: 164px;margin-left: -120px;">
								<span class="glyphicon glyphicon-star" id="favspan"><a href="" class="btn btn-link">收藏</a></span>
							</div>
							<div class="col-md-2"  style="margin-top: 164px;margin-left: -126px;">
								<span class="glyphicon glyphicon-heart" id="thanksspan"><a href="" class="btn btn-link">感谢</a></span>
							</div>
						<a href="">
							<svg id="diandiandian" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em">
								<path d="M5 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill-rule="evenodd"></path>
							</svg>
						</a>
						</div>
						<!--<button class="btn btn-default" id="iwantyou">
							<svg class="Zi Zi--TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10" height="10">
								<path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z" fill-rule="evenodd"></path>
							</svg>&nbsp;
							赞同
							</button>
							<!--<button id="iwantyou"  style="width: 20px;height: 10px;"></button>-->
				</div>
			</div>
			<hr />
		</div></div>
	</body>
<script type="text/javascript">
		$("#btn_collect").click(function(){
			var classname = $("#btn_collect_icon").attr("class");
			$("#btn_collect_icon").removeClass("glyphicon-menu-up glyphicon-menu-down");
			if(classname == "glyphicon glyphicon-menu-up" ){
				$("#btn_collect_icon").addClass("glyphicon glyphicon-menu-down");
			}else{
				$("#btn_collect_icon").addClass("glyphicon glyphicon-menu-up");
			}
		});
		 	</script>
</html>